<div class="main-navbar sticky-top bg-white">
    <nav class="navbar align-items-stretch navbar-light flex-md-nowrap p-0">
        <div class="main-navbar__search w-100 d-none d-md-flex d-lg-flex"></div>
        <ul class="navbar-nav border-left flex-row ">
            <li class="nav-item border-right dropdown notifications">
                <div class="dropdown-menu dropdown-menu-small" aria-labelledby="dropdownMenuLink">
                    <a class="dropdown-item" href="#">
                        <div class="notification__icon-wrapper">
                            <div class="notification__icon">
                                <i class="material-icons">&#xE6E1;</i>
                            </div>
                        </div>
                        <div class="notification__content">
                            <span class="notification__category">Analytics</span>
                            <p>Your website’s active users count increased by
                                <span class="text-success text-semibold">28%</span> in the last week. Great job!</p>
                        </div>
                    </a>
                    <a class="dropdown-item" href="#">
                        <div class="notification__icon-wrapper">
                            <div class="notification__icon">
                                <i class="material-icons">&#xE8D1;</i>
                            </div>
                        </div>
                        <div class="notification__content">
                            <span class="notification__category">Sales</span>
                            <p>Last week your store’s sales count decreased by
                                <span class="text-danger text-semibold">5.52%</span>. It could have been worse!</p>
                        </div>
                    </a>
                    <a class="dropdown-item notification__all text-center" href="#"> View all Notifications </a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-nowrap px-3" data-toggle="dropdown" href="#" role="button"
                   aria-haspopup="true" aria-expanded="false">
                    <img class="user-avatar rounded-circle mr-2"
                         src="/statics/images/avatars/default.png"
                         alt="User Avatar">
                    <span id="username_span" hidden class="d-none d-md-inline-block">{{ user.username }}</span>
                    <span id="name_span">{{ user.name }}</span>
                </a>
                <div class="dropdown-menu dropdown-menu-small">
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item text-danger" id="button_logout" href="/manage/logout/">
                        <i class="material-icons text-danger">&#xE879;</i> 注销 </a>
                </div>
            </li>
        </ul>
        <nav class="nav">
            <a href="#" class="nav-link nav-link-icon toggle-sidebar d-md-inline d-lg-none text-center border-left"
               data-toggle="collapse" data-target=".header-navbar" aria-expanded="false" aria-controls="header-navbar">
                <i class="material-icons">&#xE5D2;</i>
            </a>
        </nav>
    </nav>
</div>